{% extends 'layout/base.html' %}
{% load static %}
{% block title %}标签 | {% endblock %}
{% block banner %}
	<div class="bg-cover index-back pd-header about-cover">
		<div class="container">
			{% include 'layout/banner.html' %}
		</div>
	</div>
{% endblock %}
{% block contents %}
	<div id="tags" class="container chip-container">
		<div class="card">
			<div class="card-content">
				<div class="tag-title center-align">
					<i class="fas fa-tags"></i>&nbsp;&nbsp;文章标签
				</div>
				<div class="tag-chips">
					{% for tag in tags %}
						<a href="{% url 'article_tag' tag.id %}" title="Django: 1">
                    <span class="chip center-align waves-effect waves-light chip-default "
                          data-tagname="{{ tag.name }}" style="background-color: #F9EBEA;">{{ tag.name }}
                        <span class="tag-length">{{ tag.get_items }}</span>
                    </span>
						</a>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>


	<article id="articles" class="container articles">
		<div class="row tags-posts">
			{% for article in articles.object_list %}
				<div class="article tag-post col s12 m6 l4" data-tags="Write-up" data-aos="fade-up">
					<div class="card">
						<a href="{% url 'article_detail' article.id %}">
							<div class="card-image tag-image">
								<img src="{{ article.cover }}" class="responsive-img" alt="{{ article.title }}">
								<span class="card-title">{{ article.title }}</span>
							</div>
						</a>
						<div class="card-content article-content">
							<div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>{{ article.add_time }}
                            </span>
								<span class="publish-author">
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                <a href="{% url 'article_category' article.category_id %}" class="post-category">
                                {{ article.category }}
                                </a>
                            </span>
							</div>
						</div>
					</div>
				</div>
			{% endfor %}
		</div>
	</article>
	</main>
{% endblock %}
{% block pagination %}
	<div class="container paging">
		<div class="row">
			<div class="col s6 m4 l4">
				{% if articles.has_previous %}
					<a href="?{{ articles.previous_page_number.querystring }}"
					   class="left btn-floating btn-large waves-effect waves-light left-color">
				{% else %}
					<a class="left btn-floating btn-large disabled">
				{% endif %}
				<i class="fas fa-angle-left"></i>
				</a>
			</div>

			<div class="page-info col m4 l4 hide-on-small-only">
				<div class="center-align b-text-gray">{{ articles.number }} / {{ articles.pages | last }}</div>
			</div>

			<div class="col s6 m4 l4">
				{% if articles.has_next %}
					<a href="?{{ articles.next_page_number.querystring }}"
					   class="right btn-floating btn-large waves-effect waves-light right-color">
				{% else %}
					<a class="right btn-floating btn-large disabled">
				{% endif %}
				<i class="fas fa-angle-right"></i>
				</a>
			</div>

		</div>
	</div>
{% endblock %}